<template>
	<div style="padding: 0 7px;" class="flex">
		<div style="padding: 0 7px;" @click="toggleMenu" class="hamburger-item">
			<svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
			 width="64" height="64">
				<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
			</svg>
		</div>
		<div style="padding: 0 7px;" @click="toggleRefresh" class="hamburger-item">
			<svg class="hamburger" viewBox="0 0 1300 1040" xmlns="http://www.w3.org/2000/svg" width="64" height="64">
				<path d="M625.777778 917.162667a394.808889 394.808889 0 0 1-329.557334-178.858667H191.886222A483.953778 483.953778 0 0 0 625.777778 1007.388444a489.130667 489.130667 0 0 0 483.384889-450.56h90.225777l-132.437333-179.882666-132.437333 179.882666h86.016A399.928889 399.928889 0 0 1 625.777778 917.162667z m0-900.551111a488.106667 488.106667 0 0 0-477.127111 405.162666H52.167111l132.437333 180.451556 132.437334-180.451556H238.364444A399.473778 399.473778 0 0 1 625.777778 108.885333a393.671111 393.671111 0 0 1 299.349333 138.752l17.180445-4.209777h89.713777A481.28 481.28 0 0 0 625.777778 16.611556z" />
			</svg>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Hamburger',
		inject: ['reload'],
		props: {
			isActive: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			toggleMenu() {
				this.$emit('toggleMenu')
			},
			toggleRefresh() {
				this.reload()
			}
		}
	}
</script>

<style scoped>
	.hamburger {
		display: inline-block;
		vertical-align: middle;
		width: 20px;
		height: 20px;
	}

	.hamburger.is-active {
		transform: rotate(180deg);
	}
	
	.hamburger-item{
		cursor: pointer;
		transition: background .3s;
		-webkit-tap-highlight-color: transparent;
	}
	.hamburger-item:hover {
		background: rgba(0, 0, 0, .025)
	}
</style>
